<template>
    <div class="editUserInfo">
        <navigator :title="'修改资料'" :right_show="true" :right_txt="'保存'" @rightBtn="clickRight">
        </navigator>
        <div class="head_info">
            <img :src="userInfo.headImg" alt="">
            <span @click="upLoadImg()">
                修改头像
            </span>
        </div>
        <div class="account">
            <div class="title">
                常规
            </div>
            <div class="list" @click="model = true">
                <span>
                    昵称
                </span>
                <span>
                    {{ userInfo.nickName }}
                </span>
            </div>
            <div class="list" @click="model1 = true">
                <span>
                    性别
                </span>
                <span>
                    {{ userInfo.sex == null ? '保密' :
                        userInfo.sex == 0 ? '女' : '男'
                    }}
                </span>
            </div>
            <div class="list">
                <span>
                    个人简介
                </span>
                <textarea placeholder="写点什么吧" v-model="userInfo.desction"></textarea>
                <span>
                    {{ userInfo.desction == null ? 0 : userInfo.desction.length }}/150
                </span>
            </div>
        </div>
        <Modal v-model="model" title="修改昵称" :loading="false">
            <Input v-model="userInfo.nickName" placeholder="请输入要修改的昵称" style="width:300px" />
        </Modal>
        <Modal v-model="model1" title="修改性别" :loading="false">
            <RadioGroup v-model="userInfo.sex">
                <Radio label="null">保密</Radio>
                <Radio label="1">男</Radio>
                <Radio label="0">女</Radio>
            </RadioGroup>
        </Modal>
    </div>
</template>

<script>
// 引入导航组件
import navigator from '@/components/nav-head'
import {
    // 导入上传文件接口
    uploadFile,
    // 导入修改资料接口
    editUserInfo,
    // 导入获取用户信息接口
    getUserInfo
} from '@/api'
export default {
    components: {
        navigator
    },
    data() {
        return {
            userInfo: JSON.parse(localStorage.getItem('userInfo')),
            model: false,
            model1: false
        }
    },
    watch: {
        "userInfo.desction"(nVal) {
            // console.log(nVal);
            this.userInfo.desction = nVal.substr(0, 150)
        }
    },
    methods: {
        // 点击了右箭头
        clickRight() {
            console.log(this.userInfo);
            // 调用修改资料接口
            editUserInfo(this.userInfo).then(res => {
                if (res.data.code == 1) {
                    this.$Message.success('修改成功');
                    // 重新获取用户信息
                    getUserInfo().then(result => {
                        // 先更新本地token
                        localStorage.setItem('token', result.data.result.token);
                        // 更新data里面的 用户信息数据
                        this.userInfo = result.data.result;
                        // 更新本地存储 localStorage的用户信息
                        localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
                    })
                }
            })
        },
        // 上传头像
        upLoadImg() {
            // 定义this指向
            let _this = this;
            // 创建input元素
            let input = document.createElement('input');
            // 改变type值
            input.type = 'file';
            // 主动触发input的点击事件
            input.click();
            // 监听input的变化
            input.onchange = function (e) {
                // input.files 
                //  是file的专属的对象 files是选择文件的文件信息
                /* 
                    files 
                        lastModified  文件的最后修改时间
                        name        文件名
                        size        文件大小 bytes  (5416bytes = 5.2890625kb = ... Mb = ........Gb =  .....Tb)
                        type        文件的类型 
                */
                // 创建formData
                let data = new FormData();
                // 把文件放在data中
                data.append('file', input.files[0])
                // console.log(data);
                // 调用上传文件接口
                uploadFile(data).then(res => {
                    // console.log(res);
                    if (res.data.code == 1) {
                        // 弹出提示信息
                        _this.$Message.success(res.data.msg);
                        // 修改头像的地址
                        _this.userInfo.headImg = res.data.result
                    } else {
                        _this.$Message.error(res.data.msg)
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.editUserInfo {
    padding-top: 44px;
}

.head_info {
    height: 4.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 50%;
        margin-bottom: 0.1rem;
    }

    span {
        color: rgb(50, 134, 255);
    }
}

.account {
    width: 94%;
    padding: 5px 10px;
    border-radius: 7px;
    background-color: #ffffff;
    margin-left: 3%;
    margin-bottom: 20px;

    .title {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        font-size: 13px;
    }

    .list {
        padding: 5px;
        min-height: 40px;
        line-height: 30px;
        border-bottom: 1px solid #f4f4f4;
        display: flex;
        justify-content: space-between;
        position: relative;

        span:nth-child(2) {
            color: #999;
            font-size: 13px;
            display: inline-block;
            min-width: 30%;
            text-align: right;
        }

        textarea {
            width: 70%;
            height: 200px;
            line-height: 18px;
            padding: 7px;
            padding-bottom: 15px;
            border: 0.5px solid #eee;
            border-radius: 7px;
            font-size: 12px;
            outline: none;
            color: #555;
        }

        span:nth-child(3) {
            color: #999;
            font-size: 13px;
            position: absolute;
            right: 10px;
            bottom: 0;
        }
    }
}
</style>